<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('百度ECharts')" />
</head>
<body class="gray-bg">
<div class="row  border-bottom white-bg dashboard-header">

</div>
<div class="wrapper wrapper-content animated fadeInRight">
	<div class="row">
		<div class="col-sm-6">
			<div class="ibox float-e-margins">

				<div class="ibox-content">
					<div class="echarts" id="echarts-line-chart"></div>
				</div>
			</div>
		</div>
		<div class="col-sm-6">
			<div class="ibox float-e-margins">

				<div class="ibox-content">

					<div class="echarts" id="echarts-bar-chart"></div>
				</div>
			</div>
		</div>
	</div>



</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
	// 初始化 Echarts 实例
	var myChart = echarts.init(document.getElementById('echarts-line-chart'));
	// 数据
	var days = ['昨日', '今日'];
	var memberCount = [10, 20];
	// 配置项
	var option = {
		title: {
			text: '今日与昨日会员数对比'
		},
		tooltip: {
			trigger: 'item',
			formatter: '{b}: {c}人'
		},
		xAxis: {
			type: 'category',
			data: days
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				type: 'bar',
				data: memberCount
			}
		]
	};
	// 使用制定的配置项和数据显示图表
	myChart.setOption(option);


	var myChart1 = echarts.init(document.getElementById('echarts-bar-chart'));

	// 定义数据
	var days = ['今日', '昨日'];
	var months = ['本月', '上月'];
	var data = {
		days: {
			member: [15, 5],
			recharge: [100, 200],
			vip: [1, 1],
			download: [10, 10]
		},
		months: {
			member: [76, 10],
			recharge: [12, 2],
			vip: [1, 1],
			download: [6, 5]
		}
	};

	// 配置项
	var option1 = {
		title: {
			text: '收入情况'
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type:'shadow'
			}
		},
		legend: {
			data: ['会员充值', '开通 VIP', '文档下载']
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [
			{
				type: 'category',
				data: days,
				name: '时间（日）'
			},
			{
				type: 'category',
				data: months,
				name: '时间（月）',
				axisLine: {
					onZero: false
				},
				position: 'bottom'
			}
		],
		yAxis: {
			type: 'value',
			name: '收入（元）'
		},
		series: [
			{
				name: '会员充值',
				type: 'bar',
				data: data.days.recharge,
				stack: '总量'
			},
			{
				name: '开通 VIP',
				type: 'bar',
				data: data.days.vip,
				stack: '总量'
			},
			{
				name: '文档下载',
				type: 'bar',
				data: data.days.download,
				stack: '总量'
			},
			{
				name: '会员充值',
				type: 'bar',
				data: data.months.recharge,
				stack: '总量',
				xAxisIndex: 1
			},
			{
				name: '开通 VIP',
				type: 'bar',
				data: data.months.vip,
				stack: '总量',
				xAxisIndex: 1
			},
			{
				name: '文档下载',
				type: 'bar',
				data: data.months.download,
				stack: '总量',
				xAxisIndex: 1
			}
		]
	};
	myChart1.setOption(option1);
</script>
</body>
</html>